<script setup>
import { ref , reactive } from "vue";
import EditorRow from "./editorRow.vue"
import {Editor} from "@/utils/editor.js"
defineProps({
  el:{
    type:Element,
    default:document.createElement("div")
  }
})
const editorEl=ref(null), editorContent=reactive({
    spanList:[],//分割出来的span
    str:"",//全部文字
    index:0,
    rows:[],
    row:0,//行
    column:0,//列
    sliceSize:50,//span分割字数
	width:"0px",
	height:0,
	pos:{
		top:0,
		left:0
	},
	el:editorEl
})
function focus(e){
    const pos=getPos(e)
    if(pos.textNode.data){//有内容
        const spanIndex=pos.textNode.parentNode.getAttribute("spanIndex")
        const rowIndex=pos.textNode.parentNode.getAttribute("rowIndex")
        editor.setEditorPos(rowIndex,editor.editorContent.rows[rowIndex].str.length)
    }else{
        editor.setEditorPos(0,0)//可能不需要
    }
    editorEl.value.focus();
}
function getPos(e){
    var range;
    var textNode;
    var offset;

    if (document.caretPositionFromPoint) {
        range = document.caretPositionFromPoint(e.clientX, e.clientY);
        textNode = range.offsetNode;
        offset = range.offset;

    } else if (document.caretRangeFromPoint) {
        range = document.caretRangeFromPoint(e.clientX, e.clientY);
        textNode = range.startContainer;
        offset = range.startOffset;
    }
    return {
        range,
        textNode,
        offset
    }
}
const editor=reactive(new Editor(editorContent,0))
editor.debugLog(false)
function input(e){
    if(e.data||e.key){
        editor.inputText(e)
        editorEl.value.innerHTML=""
		setPos()
    }
}
// function setEditorRowPos(e,index){
//     const pos=getPos(e)
//     editor.setEditorPos(index,pos.offset)
    
//     editorEl.value.focus();
// }
function columnPos({e,rowIndex,spanIndex}){
    const pos=getPos(e)
	let column=pos.offset
	if(spanIndex!==0){
		column+=(spanIndex)*50
	}
    editor.setEditorPos(rowIndex,column)
	setPos()
    editorEl.value.focus();
}
function setPos(){
    const width=getWeight()//编辑区宽度
	const inputWidth=editorContent.width//输入位置的字符串宽度
	const meline=parseInt(inputWidth/width)
	let line=0;
	for(let i=0;i<editorContent.row;i++){
		
		const strWidth=editor.getTextWidth(editorContent.rows[i].str)
		const temp=Math.ceil(strWidth/width)
		if(temp===0){
			line++
		}else{
			line+=temp
		}
	}
	const selectWidth={//如总长度1600，编辑器宽度500，line:3，width:1600 -500*3
		line,//在第几行
		width:inputWidth-width*meline//最后宽度
	}
	console.log("selectWidth.line:",selectWidth.line);
	console.log("editorContent.height:",editorContent.height);
	editorContent.pos.top=selectWidth.line*editorContent.height
	editorContent.pos.left=selectWidth.width
}
function getWeight(){
	return editorEl.value.clientWidth
}
function keyup(e){
    switch(e.key){
        case "ArrowRight":
            e.stopPropagation()
            editor.columnMove(1)
            break
        case "ArrowLeft":
            e.stopPropagation()
            editor.columnMove(-1)
            break
        case "ArrowUp":
            editor.rowMove(-1)
        break
        case "ArrowDown":
            editor.rowMove(1)
        	break
        case "Enter":
            // e.stopPropagation()
            if(e.ctrlKey===true){
                editor.newRow()
            }else{
                editor.sliceRow()
            }
			setPos()
            break
		default:
			if(e.key.length===1){
				input(e)
			}
			break
    }
}
</script>

<template>
	<div class="pos" ref="pos" :style="{
		height:editorContent.height+'px',
		top:editorContent.pos.top+'px',
		left:editorContent.pos.left+'px'
		}"></div>
    <div class="editorBox">
        <div class="focus" @keydown="keyup" @compositionend="input" ref="editorEl" contenteditable=""></div>
        <div class="editor" @click="focus" tabindex="1">
            <EditorRow 
				@columnPos="columnPos($event)"
                v-for="item,index in editorContent.rows"
				:key="index"
                :spanList="item.spanList"
                :rowIndex="index" :currentRow="editorContent.row"
				:selectWidth="editorContent.width"
				:height="editorContent.height"
            ></EditorRow>
        </div>
    </div>
    <div>行{{editorContent.row}} 列{{editorContent.column}} 宽{{editorContent.width}}高{{editorContent.height}}</div>
    <div v-for="item in editorContent.rows" v-text="item" :key="item.str"></div>

</template>

<style scoped>
.pos{
	position: absolute;
	background-color: rgb(255, 255, 255);
	width: 2px;
	animation: pos 1s infinite;
}
@keyframes pos{
	to{
		z-index: 1;
	}
}
.editorBox{
	font: 12px 微软雅黑;
    position: relative;
    width: 100vw;
    height: 100vh;
    width: 100%;
    height: 100%;
    border: 1px solid orange;
	background-color:rgb(56, 56, 56);
	color: #fff;
}
.focus{
    opacity: 0;
    outline: none;
    background-color: rgb(214, 190, 190);
    z-index: -1;
}
.focus,.editor{
    position: absolute;
    width: 100%;
    height: 100%;
    word-break: break-all;
}
.editor{
    height: 500px;
}
</style>